<template>
  <view class="page_detail">
    <view class="page_main">
      <view class="top flex flex-col just-sb w100">
        <view class="title c333 fwb text-ellipsis-2 mb28">{{ detail.title }}</view>
        <view class="content c666 fs22">
          <view class="time flex just-sb mb10">
            <view>
              <view>开始时间：{{ detail.startTime }}</view>
              <view>结束时间：{{ detail.endTime }}</view>
            </view>

            <view class="center-c">
              <view class="state"  :class="'state'+detail.status">{{ states[detail.status] }}</view>
            </view>
          </view>

          <view class="address">{{ detail.address }}</view>
        </view>
      </view>

      <view class="rate">
        <view class="w100 flex just-sb">
          <view class="title">预约进度</view>
          <view class="total">
            <span>{{ detail.ynumber }}</span>/<span>{{ detail.maxNumber }}</span>人
          </view>
        </view>
        <view class="rate-bar">
          <view class="rate-bar-child" :style="{ width: ((detail.ynumber / detail.maxNumber) * 100).toFixed(2) + '%' }"></view>
        </view>
      </view>

      <view class="contents">
        <view v-html="detail.activityDesc"></view>
      </view>

      <view class="button w100 center-c" @click="preBook">
        <span v-if="detail.yflag==1">取消预约</span>
        <span v-else>点击预约</span>
      </view>
    </view>
  </view>
</template>

<script>
import {gateway,getAction, postAction} from '@/utils/api.js'
export default {
  data() {
    return {
      list: [],
      states: ['未开始', '进行中', '已结束'],
      detail: {},
      barWidth: 0,
      isPreBook: false
    }
  },
  onLoad(e) {
    this.getDetail(e.id);
  },
  methods: {
    // getDetail() {
    //   this.detail = {
    //     id: 1,
    //     title: '欧营“村节”联欢晚会',
    //     category: '在线预约',
    //     letter: 'ONLINE',
    //     startTime: '2024-02-09 10:10:10',
    //     endTime: '2024-02-12 10:10:10',
    //     address: '欧营村村委大会议室405',
    //     picUrl: '',
    //     content: '<p><img src="http://img.xd.sidwit.com/qjsy/temp/20240204170324_1707037428655.jpg" /></p><p>&nbsp;&nbsp;&nbsp;&nbsp;乡村晚会是中国农村地区的一种传统娱乐活动，通常在农历新年、春节、中秋节等传统节日期间举行。乡村晚会的形式和内容因地区而异，但通常包括以下几个方面：  </p><p>&nbsp;&nbsp;&nbsp;&nbsp;歌舞表演：乡村晚会最吸引人的部分之一是歌舞表演。这些表演通常由当地的文艺团体、学校或村民自发组织，表演内容包括民族舞蹈、地方戏曲、歌唱等。   </p><p>&nbsp;&nbsp;&nbsp;&nbsp;民间艺术表演：中国农村地区有许多独特的民间艺术表演，如舞龙、舞狮、踩高跷等。这些表演具有浓郁的地方特色，是乡村晚会的亮点之一。     </p><p>&nbsp;&nbsp;&nbsp;&nbsp;互动游戏：为了增加观众的参与感，乡村晚会还会举行各种互动游戏，如猜灯谜、抽奖等。这些游戏通常与传统节日相关，充满趣味性。     </p><p>&nbsp;&nbsp;&nbsp;&nbsp;特色美食：在乡村晚会期间，当地村民还会摆出各种特色美食，如年糕、汤圆、粽子等。这些美食不仅让人们品尝到地道的乡村风味，也是展示当地文化的一种方式。</p><p><img src="http://img.xd.sidwit.com/qjsy/temp/20240204170324_1707037428655.jpg" /></p>',
    //     num: 15,
    //     total: 30,
    //     state: 1
    //   };

    //   if (this.detail.total) {
    //     this.barWidth = ((this.detail.num / this.detail.total) * 100).toFixed(2)
    //   }
    // },
	
	getDetail(id){
		let params={id}
		getAction(gateway.sysrural+'/village/villageActivityInfo/queryById',params).then(res=>{
			if(res.code==200){
				this.detail=res.result || {}
			}
		})
	},
    preBook(){
		let params={activityId:this.detail.id}
		if(this.detail.yflag==1){
			getAction(gateway.sysrural+'/village/villageActivityApplicationInfo/backApplicationInfo',params).then(res=>{
				if(res.code==200){
					this.detail.yflag=null
				}
			})
			
		}else{
			postAction(gateway.sysrural+'/village/villageActivityApplicationInfo/add',params).then(res=>{
				if(res.code==200){
					this.detail.yflag=1
				}
			})
		}
    }
  }
}
</script>

<style lang="less" scoped>
.page_detail {
  .page_main {
    width: 694rpx;
    margin: 0 auto;
    padding: 0 0 50rpx;

    .top {
      padding: 33rpx 28rpx;
      line-height: 44rpx;

      .title {
        font-size: 33rpx;
        text-align: left;
      }

      .content {
        line-height: 44rpx;
        font-size: 22rpx;

        .time {
          .state {
            width: 79rpx;
            height: 31rpx;
            line-height: 31rpx;
            border-radius: 15rpx;
            font-size: 19rpx;
            color: #ffffff;
            text-align: center;

            &.state0 {
              background: #423dd4;
            }

            &.state1 {
              background: #628fcb;
            }

            &.state2 {
              background: #a5a5b0;
            }
          }
        }

        .address {
          background: url(/static/address.png) left center no-repeat;
          background-size: 28rpx 26rpx;
          padding-left: 40rpx;
        }
      }
    }

    .rate {
      background: #ffffff;
      border-radius: 16.67rpx;
      line-height: 48rpx;
      padding: 28rpx;

      .title {
        font-size: 28rpx;
        font-weight: 800;
        text-align: left;
        color: #333333;
      }

      .total {
        span {
          font-size: 24rpx;

          &:first-child {
            font-size: 28rpx;
            font-weight: 800;
            color: #628fcb;
          }
        }
      }

      .rate-bar {
        width: 100%;
        height: 22rpx;
        background: #f0eeee;
        border-radius: 11rpx;
        margin: 20rpx 0 10rpx;
        position: relative;

        .rate-bar-child {
          height: 22rpx;
          background: #628fcb;
          border-radius: 11rpx;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }

    .contents {
      background: #ffffff;
      border-radius: 16.67rpx;
      line-height: 48rpx;
      padding: 28rpx;
      margin-top: 34rpx;
    }

    .button {
      height: 79rpx;
      background: linear-gradient(180deg, #67a0ff, #ede1ff);
      border-radius: 39rpx;
      font-size: 33rpx;
      color: #ffffff;
      margin: 60rpx 0 0;
    }
  }
}
</style>
